import React, { useEffect, useState } from "react";
import { useCategoryList, useProList,useOnScroll } from "./myHooks";

export default function Index() {
  const categoryList = useCategoryList();
  const [pageIndex,setPageIndex] = useState(1);
  const proList = useProList(pageIndex);

  useOnScroll();

  return (
    <div>
      <h1>自定义hooks</h1>
      <p>hooks的规则：</p>
      <p>1、hooks函数的名字必须以小写的use开头，用小驼峰的写法。</p>
      <p>2、hooks函数可以被其他hooks函数调用，而不能被普通函数调用</p>
      <p>3、hooks函数也可以使用在函数是组件里，而且必须在根级调用</p>
      <hr />
      <h5>分类列表</h5>
      <ul style={{ height: 200, overflowY: "auto" }}>
        {categoryList.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <h5>产品列表</h5>
      页码：
      <select value={pageIndex} onChange={e=>{setPageIndex(e.target.value)}}>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <ul>
        {proList.map((item) => (
          <li key={item.id}>{item.proname}</li>
        ))}
      </ul>
    </div>
  );
}
